<%@ page contentType="text/html;charset=UTF-8" language="java"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="inculd-head.jsp" %>
<link rel="stylesheet" href="ztree/zTreeStyle.css"/>
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="crowd/my-menu.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">
    $(function () {
        //调用封装好的初始化函数,初始化树形结构
        generateTree();

        //添加子节点按钮,绑定单击响应函数
        $("#treeDemo").on("click",".addBtn",function () {
            //打开模态框
            $("#menuAddModal").modal("show");

            //把当前节点的id,作为新节点的pid保存到全局变量
            window.pid = this.id;

            return false;
        });

        //模态框中的保存按钮,绑定单击响应函数
        $("#menuSaveBtn").click(function () {
            //获取表单项中的输入数据
            var name = $.trim($("#addModalName").val());
            var url = $.trim($("#addModalUrl").val());
            var icon = $.trim($("#menuAddModal [name=icon]:checked").val());

            //发送ajax请求
            $.ajax({
                "url":"menu/save.json",
                "type":"post",
                "data":{
                    "pid":window.pid,
                    "name":name,
                    "url":url,
                    "icon":icon
                },
                "dataType":"json",
                "success":function (response) {
                    var result = response.result;
                    if ("SUCCESS" == result){
                        layer.msg("操作成功");
                        //更新树
                        generateTree();
                    }
                    if ("FAILED" == result){
                        layer.msg("操作失败" + response.message);
                    }
                },
                "error":function (response) {
                    layer.msg(response.status+" "+response.statusText);
                }
            });
            $("#menuAddModal").modal("hide");

            //直接调用页面的重置按钮操作清空表单
            $("#menuResetBtn").click();
        });

        //更新节点按钮,绑定单击响应函数
        $("#treeDemo").on("click",".editBtn",function () {
            //打开模态框
            $("#menuEditModal").modal("show");

            //把当前节点的id保存到全局变量
            window.id = this.id;

            //获取zTreeObj对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            //根据id拿到节点对象
            var key = "id";

            var value = window.id;

            var currentNode = zTreeObj.getNodeByParam(key,value);

            //回显表单数据
            $("#menuEditModal [name=name]").val(currentNode.name);
            $("#menuEditModal [name=url]").val(currentNode.url);
            //注意icon是单选框,对象的回显用数组
            $("#menuEditModal [name=icon]").val([currentNode.icon]);

            return false;
        });

        //模态框中的更新按钮,绑定单击响应函数
        $("#menuEditBtn").click(function () {
            //获取表单项中的输入数据
            var name = $.trim($("#menuEditModal [name=name]").val());
            var url = $.trim($("#menuEditModal [name=url]").val());
            var icon = $.trim($("#menuEditModal [name=icon]:checked").val());

            //发送ajax请求
            $.ajax({
                "url":"menu/update.json",
                "type":"post",
                "data":{
                    //不修改父节点的话,这里不传就可以了
                    "id":window.id,
                    "name":name,
                    "url":url,
                    "icon":icon
                },
                "dataType":"json",
                "success":function (response) {
                    var result = response.result;
                    if ("SUCCESS" == result){
                        layer.msg("操作成功");
                        //更新树
                        generateTree();
                    }
                    if ("FAILED" == result){
                        layer.msg("操作失败" + response.message);
                    }
                },
                "error":function (response) {
                    layer.msg(response.status+" "+response.statusText);
                }
            });
            $("#menuEditModal").modal("hide");
        });

        $("#treeDemo").on("click",".removeBtn",function (){
            //打开模态框
            $("#menuConfirmModal").modal("show");
            //把当前节点的id保存到全局变量
            window.id = this.id;
            //获取zTreeObj对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            //根据id拿到节点对象
            var key = "id";

            var value = window.id;

            var currentNode = zTreeObj.getNodeByParam(key,value);

            //回显表单数据
            $("#removeNodeSpan").text("【"+currentNode.name+"】");

            return false;
        });

        //给模态框中的删除按钮绑定单击响应函数
//模态框中的更新按钮,绑定单击响应函数
        $("#confirmBtn").click(function () {
            //获取表单项中的输入数据


            //发送ajax请求
            $.ajax({
                "url":"menu/remove.json",
                "type":"post",
                "data":{
                    //不修改父节点的话,这里不传就可以了
                    "id":window.id
                },
                "dataType":"json",
                "success":function (response) {
                    var result = response.result;
                    if ("SUCCESS" == result){
                        layer.msg("操作成功");
                        //更新树
                        generateTree();
                    }
                    if ("FAILED" == result){
                        layer.msg("操作失败" + response.message);
                    }
                },
                "error":function (response) {
                    layer.msg(response.status+" "+response.statusText);
                }
            });
            $("#menuConfirmModal").modal("hide");
        });
    });
</script>
<body>
<%@include file="inculd-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal">
                        <i class="glyphicon glyphicon-question-sign"></i>
                    </div>
                </div>
                <div class="panel-body">
                    <%--存放ztree动态生成结点的静态标签--%>
                    <ul id="treeDemo" class="ztree" ></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="/WEB-INF/modal-menu-add.jsp"%>
<%@include file="/WEB-INF/modal-menu-confirm.jsp"%>
<%@include file="/WEB-INF/modal-menu-edit.jsp"%>
</body>
</html>